<template>
    <div class="big-progress-bar">
        <div class="inner">
            <img class="bg" src="./assets/01.svg" alt="">
            <div class="progress">
                <div class="completed" :style="{width: `${safetyProgress * 100}%` }"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    name: 'big-progress-bar',
    props: {
        value: {
            type: [Number,String],
            default: 0
        }
    },
    computed: {
        safetyProgress() {
            let value = parseFloat(this.value)
            if (value > 1) {
                value /= 100
            }
            return Math.max(0,Math.min(1, value))
        }
    }
})


</script>

<style scoped>
.big-progress-bar {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner {
    position: relative;
    height: 2rem;
    width: 40.625rem;
}

.bg {
    height: 100%;
    width: 100%;
    display: block;
}
.progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    mask-image: url(./assets/02.svg);
    mask-position: 0 0;
    mask-size: 100% 100%;
}

.completed {
    height: 100%;
    background: linear-gradient(270deg, #DDB15C 33.83%, rgba(221, 177, 92, 0) 99.98%);
    transform: skewX(-20deg);
}
</style>